<template>
    <div class="baike_page">
      <!-- 导航 开始 -->
      <div>
      <nav-bar ref="navBar" title="百科详情"></nav-bar>
    </div>
      <!-- 导航 end -->
  
      <!-- <div class="baike_detail"> -->
      <!-- banner 开始 -->
      <div class="banner">
        <template v-if="baikeInfo.pictures && baikeInfo.pictures.length">
          <li-image v-for="(item, index) in baikeInfo.pictures" :key="index" :src="item" class="img"
            :is-preview="true"></li-image>
        </template>
        <img src="@/assets/images/baike/banner2.png" alt="" v-else />
      </div>
      <!-- banner end -->
  
      <div class="content">
        <!-- 左侧菜单 开始 -->
  
        <div class="left_menu">
          <van-sticky :offset-top="48">
            <div class="inner">
              <div class="cell" :class="menuActive == item.id ? 'cell_active' : ''" v-for="(item, index) in menus"
                :key="index" @click="menuEvent(item)">
                {{ item.name }}
              </div>
            </div>
          </van-sticky>
        </div>
  
        <!-- 左侧菜单 end -->
  
        <!-- 右侧内容 开始 -->
        <div class="right_content">
          <div class="test">
            <div class="row_box" ref="introduction">
              <h2 class="title">项目简介</h2>
              <div class="txt" v-html="formatTextarea(baikeInfo.projectIntroduce)"></div>
              <h3 class="h3">项目优点：</h3>
              <div class="txt" v-html="formatTextarea(baikeInfo.projectAdvantage)"></div>
              <h3 class="h3">项目缺点：</h3>
              <div class="txt" v-html="formatTextarea(baikeInfo.projectShortcoming)"></div>
              <h3 class="h3">适应人群：</h3>
              <div class="txt" v-html="formatTextarea(baikeInfo.applyCrowd)"></div>
              <h3 class="h3">禁忌人群：</h3>
              <div class="txt" v-html="formatTextarea(baikeInfo.tabooPeople)"></div>
              <h3 class="h3">参考价格：</h3>
              <div class="txt" v-html="formatTextarea(baikeInfo.referencePrice)"></div>
              <h3 class="h3">效果展示：</h3>
              <div class="txt img_list">
                <div class="img_box" v-for="(item, index) in baikeInfo.displayEffect" :key="index">
                  <!-- <img src="@/assets/images/case.png" alt=""> -->
                  <li-image :src="item" class="img"></li-image>
                </div>
              </div>
            </div>

            <div class="dividing_line"></div>
  
            <div class="row_box" ref="treatment">
              <h2 class="title">治疗说明</h2>
              <div class="txt">
                <div class="cell_tab">
                  <div class="tab_tr tab_tr_grey">
                    <span class="th">操作时间</span>
                    <div class="td">{{ baikeInfo.operationTime }}</div>
                  </div>
                  <div class="tab_tr">
                    <span class="th">效果持续</span>
                    <div class="td">{{ baikeInfo.effectLasts }}</div>
                  </div>
                  <div class="tab_tr tab_tr_grey">
                    <span class="th">麻醉方式</span>
                    <div class="td">{{ baikeInfo.anestheticMode }}</div>
                  </div>
                  <div class="tab_tr">
                    <span class="th">治疗周期</span>
                    <div class="td">{{ baikeInfo.treatmentCycle }}</div>
                  </div>
                  <div class="tab_tr tab_tr_grey">
                    <span class="th">疼痛程度</span>
                    <div class="td">{{ baikeInfo.painDegree }}</div>
                  </div>
                  <div class="tab_tr">
                    <span class="th">治疗流程</span>
                    <div class="td" v-html="formatTextarea(baikeInfo.treatmentProcess)"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="dividing_line"></div>
            <div class="row_box" ref="postoperative">
              <h2 class="title">术后护理</h2>
              <div class="txt" v-html="formatTextarea(baikeInfo.postoperativeCare)"></div>
            </div>
            <div class="dividing_line"></div>
            <div class="row_box" ref="material">
              <h2 class="title">相关材料</h2>
              <div class="txt material_list">
                <div class="cell" v-for="(item, index) in baikeInfo.relMaterials || []" :key="`material_${index}`"
                  @click="lookMaterial(item)">
                  <div class="name van-ellipsis">{{ item.materialName }}</div>
                  <van-icon name="arrow" class="van_icon" />
                </div>
              </div>
            </div>
            <div class="dividing_line"></div>
            <div class="row_box" ref="question">
              <h2 class="title">常见问题</h2>
              <div class="txt material_list">
                <div class="cell" v-for="(item, index) in questionList" :key="`question_${index}`"
                  @click="lookQuestion(item)">
                  <img src="@/assets/images/ask.png" class="img" alt="" />
                  <div class="name van-ellipsis">{{ item.question }}</div>
                  <van-icon name="arrow" class="van_icon" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧内容 end -->
      </div>
      <!-- </div> -->
    </div>
  </template>
  <script>
  import {
    PLATFORM_TYPE,
    GET_ORALCAVITY_BAIKE_INFO,
    GET_QUESTIONANSWER_SEARCH,
    GET_SEO_SETTING_INFO,
  } from "@/http/interface";
  import { formatTextarea } from "@/utils/utils";
  import { Sticky } from "vant";
  export default {
    components: {
      [Sticky.name]: Sticky,
    },
    data() {
      return {
        menus: [
          { name: "项目简介", id: 1, target: "introduction" },
          { name: "治疗说明", id: 2, target: "treatment" },
          { name: "术后护理", id: 3, target: "postoperative" },
          { name: "相关材料", id: 4, target: "material" },
          { name: "常见问题", id: 5, target: "question" },
        ],
        baikeId:'',
        menuActive: 1,
        baikeInfo: {},
        formatTextarea: (str) => formatTextarea(str),
        questionList: [],
        seoInfo: {},
      };
    },
    head() {
      return {
        title: this.seoInfo.title,
        meta: [
          {
            hid: "description",
            name: "description",
            content: this.seoInfo.description,
          },
          {
            hid: "Keywords",
            name: "Keywords",
            content: this.seoInfo.keywords,
          },
        ],
        link: [{ ref: "canonical", href: `${this.$domain}/baike/${this.baikeId}` }],
      };
    },
    async asyncData({ query, $axios,params }) {
      let _params = { id: params.id };
      let res = await $axios.get(GET_ORALCAVITY_BAIKE_INFO, { params: _params });
      let baikeInfo = res.data || {};
      let seoInfo = {
        title: baikeInfo.seoTitle,
        description: baikeInfo.seoDescription,
        keywords: baikeInfo.seoKeywords,
      };
  
      // 常见问题
      let qParams = { pageNumber: 1, pageSize: 5, projects: baikeInfo.projectId };
      let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: qParams });
      let obj = qes.data || {};
      let questionList = obj.list || [];
  
      return {
        baikeId:params.id,
        baikeInfo,
        questionList,
        seoInfo,
      };
    },
    mounted(){
      console.log(this.$refs.navBar.style)
    },
    methods: {
      // 菜单点击事件
      menuEvent(row) {
        this.menuActive = row.id;
        let _target = row.target;
        let _dom = this.$refs[_target];
        _dom.scrollIntoView();
      },
  
      // 查看材料
      lookMaterial(row) {
        this.$router.push({
          path: `/inquire/material/${row.id}`,
        });
      },
  
      // 查看问题
      lookQuestion(row) {
        this.$router.push({
          path: `/questions/${row.id}`,
        });
      },
    },
  };
  </script>
  <style lang="less" scoped>
  @import "/assets/styles/baike/detail.less";
  </style>